<template>
  <el-table
    :data="tableData"
    v-bind="$attrs"
    :show-overflow-tooltip="true"
    @selection-change="handleSelectionChange"
    :tree-props="treeProps"
  >
    <el-table-column v-if="selection" type="selection" width="55">
    </el-table-column>

    <el-table-column
      v-for="column in columns"
      :key="column.name"
      :label="column.name"
      :prop="column.value"
      :width="column.width ? column.width : ''"
    >
      <template slot-scope="scope">
        <slot v-if="column.slotName" :name="column.slotName" :scope="scope" />

        <span v-else>
          {{ scope.row[column.value] }}
        </span>
      </template>
    </el-table-column>

    <!-- 定制插槽 -->

    <el-table-column
      v-if="handles.show"
      :label="handles.name"
      :width="handles.width ? handles.width : ''"
    >
      <template slot-scope="scope">
        <el-button
          v-for="btn in handles.btns"
          v-role="btn.directive"
          v-show="btn.show"
          :key="btn.name"
          :type="btn.btnType"
          :style="{ color: btn.textColor }"
          size="mini"
          @click="handleClick(scope.row, btn.type)"
          v-text="btn.name"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "StuTable",
  props: {
    list: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    selection: {
      type: true,
      default: false
    },
    handles: {
      type: Object,
      default() {
        return {
          show: false
        };
      }
    },
    treeProps: {
      type: Object,
      default() {
        return { children: "children", hasChildren: "hasChildren" };
      }
    }
  },

  computed: {
    tableData() {
      return this.list;
    }
  },
  methods: {
    handleClick(row, btnType) {
      this.$emit("handleClick", row, btnType);
    },
    handleSelectionChange(val) {
      this.$emit("update:selectionList", val);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;
}
</style>
